<template>
	<view class="i-collage"  :style="[paddingX]">
		<view :style="[backgroundColor, borderRadius]" class="overflow-hidd">
			<view class="components-collage-head-box e-flex e-flex-between" :style="[headStyle]" @tap="$goTo('/pages/spellGroup/index')">
				<view class="e-flex ">
					<view class="components-collage-head-title e-font-32 fw-600 e-m-r-40" :style="[{ color: option.headTitleTextColor }]">
						{{ option.headTitleText }}
					</view>
					<text class="e-font-24" :style="[{ color: option.headEndTextColor }]">{{ option.headSubTitleText }}</text>
				</view>

				<text
					class="e-font-24"
					:style="[{
						color: option.headMoreTextColor
					}]"
				>
					{{ $t('layout.更多') }}>
				</text>
			</view>

			<view :class="viewClass" class="e-p-l-20 e-p-r-20" v-if="option.layoutType == 2">
				<view class="overflow-hidd e-rela" :class="layoutClass" :style="goodsStyle" v-for="item in goodsList" :key="item.id" @tap="handleToGoodsInfo(item)">
					<view class="e-rela">
						<image mode="aspectFill" class="goods-img" :src="$fullLink(item.coverImg)"></image>
						<view class="e-abso sell-out-mask e-flex e-flex-xy-center" v-if="item.buyStock === item.stock">
							<view class="sell-out-box">
								<text class="e-font-24 c-white">{{ $t('seckill.bhz') }}</text>
							</view>
						</view>
					</view>
					<view
						class="components-collage-label e-abso e-flex-xy-center"
						:style="[{
							color: option.buttonTextColor,
							backgroundColor: option.buttonBackgroundColor
						}]"
						v-if="option.buttonShow"
					>
						<text>{{ option.buttonText }}</text>
					</view>
					<view class="goods-body e-rela" :style="[{ backgroundColor: option.goodsBackgroundColor }]">
						<view class="e-flex-1">
							<view class="e-line-2">
								{{ item.productName }}
							</view>
							<view class="components-collage-text-box e-flex e-font-24" >
								<view class="c-primary e-m-r-20" :style="[{ backgroundColor: collageTextBackgroundColor }]" v-if="option.collageNumShow">
									{{ item.peopleNumber }}{{ $t('layout.人团') }}
								</view>
								<view class="c-secondary" v-if="option.totalCollageNumShow">{{ item.buyStock }}{{ $t('layout.人已拼') }}</view>
							</view>
						</view>
						<view class="goods-price">
							<view class="price fw-500 c-red">
								<text>{{ $unitEn }}</text>
								<text>{{ item.price }}</text>
							</view>
							
						</view>
						<view  class="">
							<view v-if="item.buyStock !== item.stock" class="components-collage-button bg-primary text-center e-abso c-white e-font-26">
								{{ $t('layout.去拼团') }}
							</view>
							<view class="components-collage-button bg-grey c-white e-font-26 text-center e-abso" v-else>
								{{ $t('layout.去拼团') }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="e-flex e-flex-wrap e-p-l-20 e-p-r-20" v-else>
				<view class="e-rela" :class="[layoutClass]" :style="[layoutStyle]" v-for="item in goodsList" :key="item.id" @tap="handleToGoodsInfo(item)">
					<view class="e-rela">
						<image mode="aspectFill" class="goods-img" :src="$fullLink(item.coverImg)"></image>
						<view class="e-abso sell-out-mask e-flex e-flex-xy-center" v-if="item.buyStock === item.stock">
							<view class="sell-out-box">
								<text class="e-font-24 c-white">{{ $t('seckill.bhz') }}</text>
							</view>
						</view>
					</view>
					<view class="" :style="[{ backgroundColor: option.goodsBackgroundColor }]">
						<view
							class="components-collage-label e-abso e-flex-xy-center"
							:style="[{
								color: option.buttonTextColor,
								backgroundColor: option.buttonBackgroundColor
							}]"
							v-if="option.buttonShow"
						>
							<text>{{ option.buttonText }}</text>
						</view>
						<view class="e-line-2 e-m-t-10 e-p-l-10 e-p-r-10 e-m-b-20">
							{{ item.productName }}
						</view>
						<view class="price fw-500 c-red">
							<text>{{ $unitEn }}</text>
							<text>{{ item.price }}</text>
						</view>
						<view class="components-collage-text-box e-flex e-font-24" >
							<view class=" e-m-r-20" :style="[{ backgroundColor: collageTextBackgroundColor, color: AppSkin.primary }]" v-if="option.collageNumShow">
								{{ item.peopleNumber }}{{ $t('layout.人团') }}
							</view>
							<view class="c-placeholder" v-if="option.totalCollageNumShow">{{ item.buyStock }}{{ $t('layout.人已拼') }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	import { ref,computed } from 'vue'
	import { useLayoutCompoments,useLayoutGoodsCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {px2rpx} from './utils'
	import { getActivityGroupList } from '@/common/request/api'
	import type { GroupGoodsItem } from '@/common/request/api'
	import { useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	

	
	const props = withDefaults(defineProps<{
		option : {
			//1自动获取商品 2手动添加的商品
			goodsType: 1|2
			// 商品列表
			goodsList: GroupGoodsItem[]
			// 布局
			layoutType: 1|2|3|4|5|6|7
			//是否显示拼团人数
			collageNumShow: boolean
			//是否显示已拼团人数
			totalCollageNumShow: boolean
			//是否显示秒杀角标
			buttonShow: boolean,
			//角标文字
			buttonText: string,
			//角标文字颜色
			buttonTextColor: string,
			//角标背景颜色
			buttonBackgroundColor: string
			//底部背景颜色
			backgroundColor: string
			//商品背景颜色
			goodsBackgroundColor: string
			//商品间距
			goodsMargin: number
			// 边距
			paddingTop: number
			paddingBottom: number
			paddingX: number
			// 圆角
			radiusTop: number
			radiusBottom: number
			// color头部显示背景色 img头部显示背景图片
			headType: 'color'|'img'
			//头部背景颜色
			headBackgroundColor: string
			//头部背景图片
			headImage: string
			//头部标题文字
			headTitleText: string
			//头部副标文字
			headSubTitleText: string
			//头部标题文字颜色
			headTitleTextColor: string
			//头部副标文字颜色
			headEndTextColor: string
			//“更多”文本字体颜色
			headMoreTextColor: string
			//商品数量
			goodsNumber:number
		}
	}>(), {
		option: () => ({
			goodsType: 1,
			goodsList: [],
			layoutType: 2,
			collageNumShow: true,
			totalCollageNumShow: true,
			buttonShow: true,
			buttonText: '',
			buttonTextColor: "rgba(255, 255, 255, 1)",
			buttonBackgroundColor: "rgba(245,34,45,1)",
			backgroundColor: '',
			goodsBackgroundColor: "",
			goodsMargin: 7,
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 10,
			radiusTop: 5,
			radiusBottom: 5,
			headType: "color",
			headBackgroundColor: "rgba(255, 255, 255, 1)",
			headImage: "",
			headTitleText: '',
			headSubTitleText: '',
			headTitleTextColor: "rgba(48, 49, 51, 1)",
			headEndTextColor: "rgba(179, 179, 179, 1)",
			headMoreTextColor: "rgba(179, 179, 179, 1)",
			goodsNumber:0
		})
	})
	
	const ctx = useCurrentInstance()
	const {AppSkin} = storeToRefs(useInit())
	
	const { bodyBoxStyle:borderRadius } = useLayoutCompoments(ctx, props.option)
	const {viewClass,layoutStyle,layoutClass} = useLayoutGoodsCompoments(ctx, props.option)
	

	
	
	
	
	const collageTextBackgroundColor = computed(() => {
		return AppSkin.value.primary.replace('1)', '0.05)')
	})
	
	const goodsStyle = computed(() => {
		return [
			layoutStyle.value,
			{
				borderRadius: '10rpx'
			}
		]
	})
	
	const headStyle = computed(() => {
			let background = {}
			if (props.option.headType === 'color') {
				background = {
					backgroundColor: props.option.headBackgroundColor
				}
			} else {
				background = {
					backgroundImage: `url(${ctx.$fullLink(props.option.headImage)})`,
					backgroundRepeat: 'no-repeat',
					backgroundSize: '100%'
				}
			}
			return background
		
	})
	const backgroundColor = computed(() => {
		return {
			backgroundColor: props.option.backgroundColor
		}
	})
	
	const paddingX = computed(() =>{
		
			return {
				padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)} ${px2rpx(props.option.paddingBottom)} ${px2rpx(
					props.option.paddingX
				)}`
			}
		
	})
	
	const handleToGoodsInfo = (item:GroupGoodsItem) => {
		if (item.buyStock == item.stock) return
		ctx.$goTo('/pages/classify/goods/info/index',{
			id:item.productId,
			skuId:item.skuId
		})

	}
	
	const goodsList = ref<GroupGoodsItem[]>([])
	const layoutComponentsGetGoodsList = () => {
				if (props.option.goodsType === 2) {
					if (props.option.goodsList && props.option.goodsList.length > 0) {
						goodsList.value = props.option.goodsList
					} else {
						goodsList.value = []
					}
				} else {
					getActivityGroupList({ pageSize: props.option.goodsNumber, pageNum: 1 }).then(res => {
						goodsList.value = res.data.rows
					})
				}
			
		
	}
	
	layoutComponentsGetGoodsList()
	
</script>

<style scoped lang="scss">
@import '@/components/list/css/layoutGoods.scss';
@import '@/components/list/css/layoutCommon.scss';
.components-collage-head-box {
	padding: 24rpx;
	margin-bottom: 14rpx;
	text {
		line-height: 36rpx;
	}
	.components-collage-head-title {
		line-height: 36px;
	}
}
.components-collage-button {
	width: 126rpx;
	padding: 8rpx 0;
	border-radius: 8rpx;
	right: 20rpx;
	bottom: 20rpx;
}
.bg-grey {
	background: #989898;
}
.components-collage-label {
	width: 68rpx;
	height: 24rpx;
	border-radius: 12rpx 0 12rpx 0;
	font-size: 20rpx;
	left: 0;
	top: 0;
	text {
		transform: scale(0.8);
		font-size: 20rpx;
	}
}
.layout2 {
	.components-collage-text-box {
		margin-top: 16rpx;
	}
}
.components-collage-text-box {
	margin-top: 10rpx;
	view {
		&:first-child {
			padding: 0 20rpx;
			height: 40rpx;
			line-height: 36rpx;
			border-radius: 4rpx;
		}
	}
}
.sell-out-mask {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 10rpx;
	background-color: rgba(255, 255, 255, 0.5);
	.sell-out-box {
		background-color: rgba(0, 0, 0, 0.5);
		padding: 8rpx 32rpx;
		border-radius: 32rpx;
	}
}
.goods-img {
	border-radius: 10rpx;
}
</style>
